<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="../vue2.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="box">
    <div style="font-size: larger">事项安排表</div>

    <!-- v-model 作用：双向绑定表单-->
    <label>
        <!-- v-model 在此处双向绑定了输入框的value值-->
        <input type="text" v-model="addText" placeholder="请输入事项">
    </label>
    <button @click="handleAdd()">add</button>

    <ul v-show="datalist.length">
        <li v-for="(data,index) in datalist">
            {{index+1}}. {{data}}
            <button @click="handleDel(index)">del</button>   <!--需要用到索引-->
        </li>
    </ul>

    <div v-show="!datalist.length">代办事项，空空如也</div>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            datalist: [],
            addText: '',
        },
        methods:{
            handleAdd(){
                // console.log('获取value',this.addText)
                this.datalist.push(this.addText);
                //利用双向绑定，清空输入框
                this.addText = '';
            },
            handleDel(index){
                // console.log(index)
                this.datalist.splice(index,1);
            }
        }
    })
</script>
</body>
</html>